<!doctype html>
<!-- Conditional comment for mobile ie7 http://blogs.msdn.com/b/iemobile/ -->
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->

<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Home screen icon  Mathias Bynens http://goo.gl/6nVq0 -->
  <!-- For iPhone 4 with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
  <!-- For first-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
  <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
  <!-- For nokia devices: -->
  <link rel="shortcut icon" href="img/l/apple-touch-icon.png">

  <!--iOS web app, deletable if not needed -->
  <!--the script prevents links from opening in mobile safari. https://gist.github.com/1042026
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
  <link rel="apple-touch-startup-image" href="img/l/splash.png">-->

  <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
  <meta http-equiv="cleartype" content="on">

  <!-- more tags for your 'head' to consider https://gist.github.com/849231 -->

  <!-- Main Stylesheet -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

  

  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-custom.js"></script>
  <!-- Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill -->
  <script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js">\x3C/script>')</script>


</head>

<body>

<div data-role="page" id="page2"> 
  <div data-role="header">
    <a data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
    <h1>Get Status</h1>
  </div>
  <div data-role="content">
      <form action="">
    
	<select id="routelist">
	</select>
    
        <select id="stoplist">
       </select>
       <button type="button" id="getstatusbutton" data-theme="a">Get Status</button>
       </form>
  <br />
  <ul data-role="listview" id="resultslist" />
  <br />

 </div> 

  <div id="mapcontainer">
  <!--<img src="" id="mapimg" />-->
  </div>
  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
 <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
-->
  <!-- scripts concatenated and minified via ant build script -->
  <script src="js/mylibs/helper.js"></script>
  <!-- end concatenated and minified scripts-->


  <!-- Debugger - remove for production -->
  <!-- <script src="https://getfirebug.com/firebug-lite.js"></script> -->

 
  <script>
      var routeData = null;

      function getGoogleMapsImg(coords) {
          var width = $(window).width();
          var height = width;
          //var img = '<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"/>';
          var img = '<img src="' + generateMapUrl(coords) + '"/>';
          //alert(img);
          return img;
      }

      function initStopList(routeId)
    {
        var value = routeId;

        //var html = '<option value="0" selected="true">Select Route</option>';
        var html = '';
        html += '<option value="">Select Stop</option>';
        var len = routeData.routes.length;
        for (var i = 0; i < len; i++) {
            if (routeData.routes[i].routeId == value) {
                var stopsLen = routeData.routes[i].stopList.length;
                for (var j = 0; j < stopsLen; j++) {
                    html += '<option value="' + routeData.routes[i].stopList[j].stopId + '">' + routeData.routes[i].stopList[j].stopName + '</option>';
                }
            }
        }
        $('#stoplist').empty();
        $('#stoplist').append(html);
        $('#stoplist').selectedIndex = 0;
        $('#stoplist').selectmenu("refresh");
    }

    $('#page2').live('pageinit', function (event) {
        //$(document).ready(function () {

        $("#routelist").change(function () {
            initStopList($(this).val());
        });

        $.getJSON('SampleRouteList.txt', function (data) {
            routeData = data;
            //var html = '<option value="0">Select Route</option>';
            var html = '';
            var len = data.routes.length;
            html += '<option value="">Select Route</option>';
            for (var i = 0; i < len; i++) {
                html += '<option value="' + data.routes[i].routeId + '">Route ' + data.routes[i].routeName + '</option>';
            }
            $('#routelist').append(html);


            $('#routelist').selectedIndex = 0;
            $('#routelist').selectmenu("refresh");

            initStopList($('#routelist').val());

        });



        // add markup to container and apply click handlers to anchors
        $("#getstatusbutton").click(function (e) {
            // stop normal link click
            e.preventDefault();

            var url = "http://143.215.102.187/rhokatl/web_gateway.php?api_method=getRouteInfoAtStop&route_id=" + $('#routelist').val() + "&stop_id=" + $('#stoplist').val();
            //var url = 'SampleGetRoutesResponse.txt';

            $.getJSON(url, function (data) {
                //var html = '<ul data-role="listview" id="resultslist">';
                var html = '';
                
                if (data.length == 0)
                return;
                
                html += '<li>' + data[0] + ' - ' + data[1]  +  '<span class="ui-li-aside">' + data[2] + '</span></li>';
                
                
                //var len = data.data.length;
                //for (var i = 0; i < len; i++) {
                 //   html += '<li>' + data.data[i].routeName + '<span class="ui-li-aside">23:00</span></li>';
                  //  html += ''
               // }
                //html += '</ul>'
                $('#resultslist').empty();
                $('#resultslist').append(html);
                $('#resultslist').listview("refresh");

                //$('#map').empty();

                //if (i > 0) {
                    //$('#mapimg').attr('src', getGoogleMapsImg());
                    $('#mapcontainer').empty();
                    $('#mapcontainer').append(getGoogleMapsImg([{ "lat": "34", "lng": "-84"}]));
                    //$('#map').refresh();
                //}
            });
        });
    });
</script>

<script>
var colors = [
    "green", 
    "brown", 
    "black", 
    "purple", 
    "yellow", 
    "blue", 
    "gray", 
    "orange", 
    "red", 
    "white"        
];

var markers = [];
$(colors).each(function(idx, color) {
    var letter = getLetterForIndex(idx);
    var colorText = color + "|000000";  // 00000 == outline color
    var marker = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + letter + "|" + colorText;
    markers.push(marker);
});

function getLetterForIndex(index) {
    var letter = String.fromCharCode(65 + index);
    return letter;
}

function getMarkerUrl(index) {
    var offset = index % colors.length;
    return markers[offset];
}

function generateMapUrl(coordinates) {
    var width = $(window).width();
    var size = "" + width + "x" + width;
    var url = "http://maps.google.com/maps/api/staticmap?zoom=13&size=" + size;
    var center = null;
    $.each(coordinates, function(idx, elem){
        var lat = elem.lat;
        var lng = elem.lng;
        if (center == null) {
            //we choose the first point as the center
            url += "&center=" + lat.toString() + "," + lng.toString();
        }
        var colorIndex = idx % colors.length;
        var color = colors[colorIndex];
        var letter = getLetterForIndex(idx);
        var marker = "markers=color:" + color + "|" + "label:" + letter + "|" + lat + "," + lng;
        url = url + "&" + marker;
    });
    url += "&sensor=false";
    return url;
}

 
</script>


</div> <!--! end of #container -->

</body>
</html>
